<template>
  <view class="page-content flex-c">
    <view :class="['content flex_center']">
      <view :class="['cont']">
        <template v-if="!next">
          <!-- <image v-if="!savedFilePath" :style="{ width: bgW + 'px' }" class="cont_bg cont_bg_choose"
            src="https://content.daylucky.cn/admin/image/ur0hkhb93svdhl755bnsr2dm.png" /> -->
          <camera v-if="!savedFilePath" class="cont_bg cont_bg_choose" device-position="back" flash="off"
            @error="onCameraError" :style="{ width: bgW + 'px' }"></camera>
          <image v-else mode="aspectFill" :style="{ width: bgW + 'px' }" class="cont_bg cont_bg_choose"
            :src="savedFilePath" />
        </template>
        <view v-if="next" :style="{ width: bgW + 'px' }" class="cont_bg cont_bg_choose">
          <image class="user_img" mode="aspectFill" :src="savedFilePath" />
          <view class="line"></view>
        </view>
        <view :style="{ width: bg1W + 'px' }" :class="['cont_bg1 cont_bg1_choose']"></view>
      </view>
    </view>
    <!-- <view v-show="tipsText" class="tipV">{{ tipsText }}123</view> -->
    <view class="footer flex-r">
      <template v-if="!next">
        <image src="https://content.daylucky.cn/admin/image/7yu75xmlr8hp5dita0stg5os.png" class="back_btn"
          @click="onBackLink" />
        <image src="http://content.daylucky.cn/admin/image/nxqzgv89o6qhygeupcx0z6zv.png" class="sure_btn"
          @click="onLink" />
      </template>
      <template v-else>
        <image src="https://content.daylucky.cn/admin/image/32bcs8h7x0jdvqiuls17zkd4.png"
          class="next_gif_btn" />
        
        <!-- <image @click="onBackLink" src="https://content.daylucky.cn/admin/image/1z6juncntqwr44zlarasjhz8.png"
          class="back_btn next_back_btn" />
        <image src="https://content.daylucky.cn/admin/image/79dxeipnht4xvtycx34dj05m.gif"
          class="sure_btn next_sure_btn" /> -->
      </template>
    </view>
  </view>
</template>
<script>
import { uploadSync } from '@/utils/upload'
import { getRecommendCont } from '@/api'
export default {
  props: {
    bg1W: {
      type: Number,
      default: 0
    },
    bgW: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      savedFilePath: "",
      next: false, // 是否是扫一扫
    };
  },
  created() {
  },
  methods: {
    async fnGet(image_url) {
      // 存储内容
      const { code, data } = await getRecommendCont({ image_url })
      if (code === 1000) {
        this.$nextTick(() => {
          setTimeout(async () => {
            this.$emit('on-success', data.content)
            this.$emit('update:step', 1)
            // #ifdef MP-WEIXIN
            // #endif
          }, 5000);
        });
      } else {
        this.$emit('update:step', 1)
        this.$emit('on-fail')
        uni.showToast({
          title: data,
          icon: "none",
          duration: 3000
        })
      }
    },
    onBackLink() {
      this.$emit('update:step', 1)
    },
    onLink() {
      const ctx = wx.createCameraContext()
      ctx.takePhoto({
        quality: 'high',
        success: async (res) => {
          uploadSync(res.tempImagePath).then(savedFilePath => {
            this.savedFilePath = savedFilePath
            this.next = true;
            this.fnGet(savedFilePath)

          })
        }
      })
    },
    onCameraError(e) {
      console.log(e)
    }
  },
};
</script>
<style lang="scss" scoped>
.content {
  .cont {

    .cont_bg {

      .user_img {
        width: 100%;
        height: 100%;
      }

      .line {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(180deg, rgba(255, 131, 253, 0) 0%, rgba(255, 131, 253, 0.5) 100%);
        border-bottom: 3px solid #FF83FD;
        transform: translateY(-100%);
        animation: radar-beam 2s infinite;
        animation-timing-function: cubic-bezier(0.53, 0, 0.43, 0.99);
        animation-delay: 1.4s;
      }
    }
  }
}


.footer {
  position: relative;
  justify-content: center;

  .back_btn {
    width: 144upx;
    height: 80upx;
    left: 24upx;
    bottom: calc(46rpx + env(safe-area-inset-bottom));
    position: absolute;
  }
  .next_gif_btn {
    width: 632rpx;
    height: 62rpx;
    position: absolute;
    top: 64rpx;
    right: 64rpx;
  }

  .sure_btn {
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    width: 104upx;
    height: 104upx;

    &.next_sure_btn {
      width: 194upx;
      height: 62upx;
      margin-bottom: 21rpx;
    }
  }
}

@keyframes radar-beam {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}
</style>

